<template>
  <div class="file-management">
    <main>
      <div class="table-wrapper">
        <div class="table-hint">
          <div class="hint-right">
            <el-button class="upload-btn" @click="uploadHandler"
              ><svg-icon name="upload_icon" />导出</el-button
            ></div
          >
        </div>
        <div class="table-content fontPorscheNextRegular">
          <el-table v-loading="tableLoading" :data="tableState.dataList" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="time" label="最近更新" />
          </el-table>
        </div>
      </div>
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pageState.pageNumber"
          v-model:page-size="pageState.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableState.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>
<script setup>
  import { getVerifyList } from '@/api/prize';
  const tableLoading = ref(false);
  const pageState = reactive({
    pageNumber: 1,
    pageSize: 10,
  });
  const tableState = reactive({
    total: 0,
    dataList: [],
  });

  const uploadHandler = () => {
    console.log(1);
    importFilesState.show = true;
  };

  const handleSizeChange = () => {
    searchHandler();
  };

  const getList = async () => {
    tableLoading.value = true;
    console.log('------1---------------');
    await getVerifyList({
      pageNum: pageState.pageNumber,
      pageSize: pageState.pageSize,
    });
    setTimeout(() => {
      tableLoading.value = false;
      Object.assign(tableState, {
        total: 100,
        dataList: [],
      });
    }, 2000);
  };
  const searchHandler = () => {
    pageState.pageNumber = 1;
    getList();
  };
  onMounted(() => {
    getList();
  });
</script>
<style lang="scss" scoped>
  .file-management {
    main {
      padding: 20px;
      background: #fff;
      .table-hint {
        padding-right: 0px;
      }
      .hint-right {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        .upload-btn {
          .svg-icon {
            margin-right: 8px;
          }
        }
      }
      .table-content {
        padding: 0;
      }
    }
  }
</style>
